<template>
  <div>
    <el-dialog
      title="巡查任务记录详情"
      :visible="dialogVisible"
      custom-class="custom-dialog"
      :before-close="handleClose"
      @open="initData"
      width="78%"
      class="dialogClass"
    >
      <el-form
        ref="form"
        class="query-more-form formTop"
        size="mini"
        label-width="90px"
        :model="form"
      >
        <el-row :gutter="20">
          <el-col :span="6" class="el-col"
            ><el-form-item label="任务名称" prop="taskName"
              ><el-input
                v-model="form.taskName"
                placeholder="请输入任务名称"
                maxlength="255"/></el-form-item
          ></el-col>
          <el-col :span="6" class="el-col"
            ><el-form-item label="检查事项名称"
              ><el-input
                v-model="form.categoryName"
                placeholder="请输入任务名称"
                maxlength="255"/></el-form-item
          ></el-col>
          <el-col :span="12" class="el-col">
            <el-form-item label="巡查地点" prop="address"
              ><el-input
                v-model="form.address"
                placeholder="请输入巡查地点"
                maxlength="255"
            /></el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12" class="el-col"
            ><el-form-item label="检查事项全称"
              ><el-input
                v-model="form.categoryCompleteName"
                maxlength="255"/></el-form-item
          ></el-col>

          <el-col :span="12">
            <el-form-item label="检查主体" prop="deptName">
              <el-input
                v-model="form.deptName"
                placeholder="请选择检查主体"
                maxlength="255"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="6" class="el-col">
            <el-form-item label="执法人员数" prop="frequency"
              ><el-input v-model="form.patrolUserNumber" maxlength="255"
            /></el-form-item>
          </el-col>

          <el-col :span="6" class="el-col">
            <el-form-item label="完成情况">
              <el-input v-model="form.status" maxlength="255" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="检查时间" prop="caseTime">
              <el-date-picker
                style="width: 100%"
                v-model="form.caseTime"
                value-format="yyyy-MM-dd"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="计划完成" prop="content">
              <el-input v-model="form.planNumber" maxlength="255" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="实际完成" prop="content">
              <el-input v-model="form.completeNumber" maxlength="255" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="对象名称" prop="content">
              <el-input v-model="form.unitName" maxlength="255" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="执法人员" prop="content">
              <el-input v-model="form.userList" maxlength="255" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { parseTime } from "@/utils/index";

export default {
  components: {},
  props: {
    caseId: {
      type: Object,
      default: {}
    },
    dialogVisible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      form: {
        deptId: "",
        type: 1,
        status: 0,
        checkCount: 0,
        caseTime: [],
        beginTime: "",
        endTime: "",
        frequency: 1
      }
    };
  },

  watch: {
    caseId(val) {
      this.form = val;
      this.form.status = this.form.status == 0 ? "未完成" : "已完成";
      this.form.userList = this.form.users.map(item => item.userName).join(",");

      this.form.caseTime = [
        parseTime(this.form.beginTime),
        parseTime(this.form.endTime)
      ];
    }
  },

  methods: {
    handleClose() {
      // this.clearData();
      this.$emit("closeDialog");
    },
    initData() {
      // this.getIndustry();
      // this.getDept();
      this.form.type = this.type;
      if (this.obj && this.obj.id) {
        this.form = this.obj;
        this.form.itemTypeId = parseInt(this.form.itemTypeId);
        const timeObj = {
          caseTime: [this.obj.startTime, this.obj.endTime]
        };
        this.form = Object.assign(this.form, timeObj);
        this.tableMatterData = this.form.checklistResponsibilities;
        if (this.form.patrolGroups)
          this.checkTableData = this.form.patrolGroups[0].unitList;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.form_industry {
  /deep/ .el-input__inner {
    width: 258px;
  }
}
.isDelivery {
  /deep/ .el-form-item__label {
    border-right: 1px solid #dbdcde;
  }
  .el-switch {
    margin-left: 10px;
    margin-top: 8px;
  }
}
.table-title {
  color: #1189ef;
  font-weight: bold;
}
.footer-button {
  margin-top: 20px;
  text-align: center;
}
.operation-btn {
  padding: 0px;
  text-align: center;
  width: 70px;
  height: 28px;
  line-height: 28px;
  position: relative;
  bottom: 5px;
}
.el-col {
  margin-bottom: 0px;
}
.formTop div {
  margin-bottom: 2px;
}
.addColumn {
  margin-top: 25px;
}
.dialogClass .el-dialog_body {
  padding-top: 0px !important;
}
.el-dialog_body {
  padding-top: 0px !important;
}
</style>
